<template>
  <div class="GetSingleData">
    <div class="getMethod">
      <span class="getMethod_title" style="font-weight: bold;">获取方式</span>
      <div class="getMethod_from">
        <el-radio-group v-model="drawerData.getMethod" @change="radioGroupChange(1)">
          <el-radio :label="1">
            从表单中获取
            <el-tooltip content="选择该应用下的非流程表单" placement="top">
              <i class="el-icon-warning-outline"></i>
            </el-tooltip>
          </el-radio>
          <el-radio :label="2">
            从数据节点中获取
            <el-tooltip content='请选择"新增数据（多条）"或"获取多条数据"的节点' placement="top">
              <i class="el-icon-warning-outline"></i>
            </el-tooltip>
          </el-radio>
          <el-radio :label="3">从关联表单中获取</el-radio>
        </el-radio-group>
      </div>
      <div class="getMethod_select">
        <span>从</span>
        <el-select v-model="drawerData.getMethodSelect" filterable clearable :placeholder="`请选择${drawerData.getMethod === 1 ? '表单' : drawerData.getMethod === 2 ? '数据节点' : '数据'}`" no-data-text="无选项" size="small">
          <el-option v-for="item in selectChoose(drawerData.getMethod)" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
        <span v-if="drawerData.getMethod === 3">中的</span>
        <el-select v-if="drawerData.getMethod === 3" v-model="drawerData.getMethodRelation" filterable clearable  placeholder="请选择关联表单" no-data-text="无关联表单" size="small">
          <el-option v-for="item in relationOptions_2" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
        <span>中获取数据</span>
      </div>
    </div>
    <div class="getMethod" v-if="drawerData.getMethodSelect && drawerData.getMethodSelect !== 0">
      <span class="getMethod_title">数据过滤</span>
      <div class="getMethod_from">
        <el-radio-group v-model="drawerData.DataFilter" @change="radioGroupChange(2)">
          <el-radio :label="1">全部过滤</el-radio>
          <el-radio :label="2">按条件过滤</el-radio>
        </el-radio-group>
      </div>
      <ConditionFilter v-show="drawerData.DataFilter !== 1" :config.sync="drawerData.ConditionFilterData" />
    </div>
    <div class="getMethod" v-if="drawerData.getMethodSelect && drawerData.getMethodSelect !== 0">
      <span class="getMethod_title">排序规则</span>
      <div class="getMethod_from">
        <el-radio-group v-model="drawerData.sortRules" @change="radioGroupChange(3)">
          <el-radio :label="1">不排序</el-radio>
          <el-radio :label="2">升序</el-radio>
          <el-radio :label="3">降序</el-radio>
        </el-radio-group>
      </div>
      <div class="getMethod_select" v-if="drawerData.sortRules !== 1">
        <el-select style="width: 100%;" v-model="drawerData.sortRulesSelect" filterable clearable  placeholder="请选择排序字段" size="small">
          <el-option v-for="item in sortRulesOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </div>
    </div>
    <div class="info">
      <el-alert v-if="!drawerData.getMethodSelect || drawerData.getMethodSelect === 0" :title="`请选择${drawerData.getMethod === 1 ? '表单' : drawerData.getMethod === 2 ? '数据节点' : '关联表单'}后，再进行后续设置`" type="info" :closable="false" show-icon></el-alert>
      <span v-else>按排序规则，获取过滤后的第1条数据</span>
    </div>
  </div>
</template>

<script>
import ConditionFilter from '@/components/WorkFlow/Form/ConditionFilter'

import { nanoid } from 'nanoid'

export default {
  components: { ConditionFilter },
  props: {
    drawerData: {
      required: true,
      type: Object,
      default: () => { return {} }
    }
  },
  data () {
    return {
      relationOptions_2: [],
      sortRulesOptions: [
        { value: 1, label: '前台电话' },
        { value: 2, label: '办公点名称' }
      ]
    }
  },
  computed: {
    selectChoose () {
      return function (num) {
        if (num === 1) {
          return [
            { value: 1, label: '办公地址' },
            { value: 2, label: '信息录入' },
            { value: 3, label: '社保公积金分类' },
            { value: 4, label: '证明数据集' },
            { value: 5, label: '收入证明数据集' },
            { value: 6, label: '学历数据集' }
          ]
        }
        if (num === 2) {
          return []
        }
        if (num === 3) {
          return [
            { value: 1, label: '当前发起的表单' }
          ]
        }
      }
    }
  },
  methods: {
    radioGroupChange (num) {
      if (num === 1) {
        this.drawerData.DataFilter = 1
        this.drawerData.sortRules = 1
        this.drawerData.getMethodSelect = ''
        this.drawerData.getMethodRelation = ''
      }
      if (num === 2) {
        this.drawerData.ConditionFilterData = [{ name: nanoid(), children: [] }]
      }
      if (num === 3) {
        this.drawerData.sortRulesSelect = ''
      }
    }
  }
}
</script>

<style scoped>
.GetSingleData{
  padding: 0 20px;
  color: #606266;
}
.getMethod{
  padding: 16px 0;
  border-bottom: 1px solid #F1F2F3;
}
.getMethod_title{
  font-size: 14px;
  color: #303233;
}
.getMethod_from{
  margin: 8px 0;
}
.getMethod_select{
  margin-top: 24px;
  font-size: 12px;
}
.getMethod_select .el-select{
  margin: 0 8px;
}
.info{
  padding: 16px 0;
  font-size: 12px;
}
</style>
